<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>词汇学习</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/component.js?v=78"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="js/vue/vue-router.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
</head>

<body>
	<div id="app" v-cloak>
		<nav-top-bar :golink="backLink" linktitle="词汇学习"></nav-top-bar>
		<nut-infiniteloading @loadmore="getwords()" :has-more="list.hasMore" :is-loading="list.loading"
			:is-showMod="true" unload-more-txt="没有更多了">
			<template v-for="item in list.rows">
				<nut-leftslip :ref="`word${item.id}`">
					<div slot="slip-main" class="dancixiangqing-box1">
						<div class="cihuixuexi-cell d-f j-c-s a-c-c">
							<div class="dancixiangqing-body flex1">
								<p class="danci-title">{{ item.word }}</p>
								<p class="danci-jieshi">{{ item.cn }}</p>
							</div>
							<div class="dancixianqing-extra">
								<a class="qwjs" :href="'/shipinxuexi-cihuixiangqing.html?word='+item.word">权威解释</a>
							</div>
						</div>
					</div>
					<div slot="slipbtns" class="slipbtns">
						<nut-button @click="favor(item)">收藏</nut-button>
					</div>
				</nut-leftslip>
			</template>
		</nut-infiniteloading>
	</div>

</body>
<script>
	//可以专栏和视频轮流获取
	let router = new VueRouter({
		mode: 'history'
	})

	var vue = new Vue({
		el: "#app",
		router,
		data() {
			return {
				id: null,
				list: {
					page: 1,
					hasMore: true,
					loading: false,
					rows: []
				},

				backLink: '',
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.backLink = '/shipinxuexi.html?id=' + this.id;
			this.getwords();
		},
		methods: {
			// 获取单词列表
			getwords() {
				this.list.loading = true;
				axios.get("/mp/video/words", { params: { id: this.id, page: this.list.page } }).then(res => {
					this.list.loading = false;
					if (0 === res.data.code) {
						this.$notify.warn(e.data.msg);
					} else {
						this.list.rows.push(...res.data);
						this.list.hasMore = 10 === res.data.length;
					}
				}).catch(e => {
					this.list.loading = false;
					this.$notify.danger('服务器请求异常');
				});
			},

			// 加载更多
			loadMore() {
				this.list.page++;
				this.getwords();
			},

			// 添加收藏
			favor(word) {
				this.$refs[`word${word.id}`][0].restSlide();
				const loading = this.$toast.loading('收藏中...', { duration: 0 });
				axios.post("/mp/video/favorWord", { id: word.id }).then(res => {
					loading.hide();
					if (0 === res.data.code) {
						this.$notify.warn(e.data.msg);
					} else {
						this.$notify.success('收藏成功');
					}
				}).catch(e => {
					loading.hide();
					this.$notify.danger('服务器请求异常');
				});
			}
		}
	})
</script>

</html>